<template>
  <div class="about-page">
    <section class="mast">
      <div class="mast-inner">
        <h1 class="brand">AncientSeeker</h1>
        <p class="tagline">连接典籍脉络 · 激活语义智能 · 构建沉浸式知识旅程</p>
        <div class="quick-facts">
          <div class="fact"><span class="num">4</span><span class="label">核心子系统</span></div>
          <div class="fact"><span class="num">10K+</span><span class="label">结构化段落</span></div>
          <div class="fact"><span class="num">AI</span><span class="label">多模型协同</span></div>
          <div class="fact"><span class="num">∞</span><span class="label">探索路径</span></div>
        </div>
      </div>
      <div class="mast-bg"></div>
    </section>

    <section class="mission section-block">
      <h2 class="section-title">项目愿景</h2>
      <div class="text-grid">
        <div class="text">
          <p><strong>AncientSeeker</strong> 聚焦“古籍内容理解体验缺乏递进感、知识碎片化、互动性薄弱”这类痛点，尝试以 <em>结构化数据</em> + <em>语义模型</em> + <em>探索交互</em> 的方式，打造兼具“学术严谨”与“可玩性”的新型数字人文体验。</p>
          <p>我们希望让：<br/>1) 初学者获得分层引导；2) 有背景的读者快速检索语义与意象；3) 研究/创作用户通过 AI 发现跨文本线索。</p>
        </div>
        <div class="panel highlight">
          <h3>三层价值</h3>
          <ul>
            <li><b>理解增强：</b> AI 结构化解读与意象抽取</li>
            <li><b>路径探索：</b> 任务链 + 图谱式节点关联</li>
            <li><b>多模态延展：</b> 文本 ↔ 图像 ↔ 语义提示</li>
          </ul>
        </div>
      </div>
    </section>

    <section class="philosophy section-block">
      <h2 class="section-title">设计理念</h2>
      <div class="pill-cards">
        <div class="pill">
          <h4>语义分层</h4>
          <p>从原文 → 释义 → 意象 → 背景 → 现代关联，逐步揭示多层含义。</p>
        </div>
        <div class="pill">
          <h4>轻量交互</h4>
          <p>探索模式优先“反馈清晰”与“低操作成本”，再逐步接入复杂玩法。</p>
        </div>
        <div class="pill">
          <h4>缓存优先</h4>
          <p>AI 生成内容均走缓存层，降低响应延迟与成本波动。</p>
        </div>
        <div class="pill">
          <h4>可扩展结构</h4>
          <p>节点 / 任务 / 成就 / 小游戏均模块化，可并行迭代。</p>
        </div>
      </div>
    </section>

    <section class="architecture section-block">
      <h2 class="section-title">系统结构（简）</h2>
      <div class="arch-grid">
        <div class="arch-box">
          <h4>内容层</h4>
          <p>典籍原文、结构化章节、意象标签、元数据索引。</p>
        </div>
        <div class="arch-box">
          <h4>语义层</h4>
          <p>AI 解读、术语归并、跨段落概念锚点缓存。</p>
        </div>
        <div class="arch-box">
          <h4>交互层</h4>
          <p>会话对话、探索图谱、小游戏、成就与成长体系。</p>
        </div>
        <div class="arch-box">
          <h4>服务层</h4>
          <p>FastAPI + SSE 流式响应 + Prompt 策略中心。</p>
        </div>
        <div class="arch-box">
          <h4>前端体验</h4>
          <p>Vue3 组合式 + 主题化 UI + 渐进流式 Markdown。</p>
        </div>
        <div class="arch-box">
          <h4>运营 & 监控</h4>
          <p>后续接入埋点 / 性能剖析 / AI 命中率分析。</p>
        </div>
      </div>
    </section>

    <section class="roadmap section-block">
      <h2 class="section-title">阶段路线 (摘录)</h2>
      <div class="timeline">
        <div class="tl-item">
          <div class="dot"></div>
          <div class="content"><h4>Phase 0 - Seed</h4><p>基础典籍数据导入 + 会话对话雏形。</p></div>
        </div>
        <div class="tl-item">
          <div class="dot"></div>
          <div class="content"><h4>Phase 1 - MVP</h4><p>探索模式节点 / 任务 / 首个小游戏上线。</p></div>
        </div>
        <div class="tl-item">
          <div class="dot"></div>
          <div class="content"><h4>Phase 2 - Gamify</h4><p>成就、等级动画、更多任务类型。</p></div>
        </div>
        <div class="tl-item future">
          <div class="dot"></div>
          <div class="content"><h4>Phase 3 - Graph+</h4><p>关系边、语义聚类、知识路径推荐。</p></div>
        </div>
        <div class="tl-item future">
          <div class="dot"></div>
          <div class="content"><h4>Phase 4 - Expansion</h4><p>多语本地化 + 竞赛 / 活动体系。</p></div>
        </div>
      </div>
    </section>

    <section class="credits section-block">
      <h2 class="section-title">致谢与来源</h2>
      <div class="credits-grid">
        <div class="credit-box">
          <h4>文本整理</h4>
          <p>公开古籍资源二次结构化（章节 / 节 / 段），清理冗余符号，补齐断句。</p>
        </div>
        <div class="credit-box">
          <h4>模型能力</h4>
          <p>融合多种通用与指令型模型，按场景（解读 / 摘要 / 意象）配置 Prompt。</p>
        </div>
        <div class="credit-box">
          <h4>视觉元素</h4>
          <p>自定义配色 + 少量可商用开源图标，保证整体古雅而不失现代感。</p>
        </div>
        <div class="credit-box">
          <h4>开源组件</h4>
          <p>Vue 生态、FastAPI、以及 Markdown 解析 / 代码高亮库（按需引入）。</p>
        </div>
      </div>
    </section>

    <section class="contact section-block">
      <h2 class="section-title">联系与反馈</h2>
      <div class="contact-panel">
        <p>欢迎就内容准确性、功能体验、产品方向提出建议。后续将开放：问题反馈面板 / 节点共建机制 / AI 生成质量投票。</p>
        <ul class="contact-list">
          <li>意见反馈：<span class="mono">feedback@ancientseeker.dev</span></li>
          <li>合作交流：<span class="mono">partner@ancientseeker.dev</span></li>
          <li>版本日志：即将上线</li>
        </ul>
      </div>
    </section>

    <footer class="about-footer">© {{ new Date().getFullYear() }} AncientSeeker · Digital Humanities & AI Exploration</footer>
  </div>
</template>

<script setup>
// 当前页面以静态信息为主，后续可接入 /status 或 /metrics
</script>

<style scoped>
/* 布局与基础主题 */
.about-page { min-height:100vh; background:
  radial-gradient(circle at 20% 18%, rgba(255,255,255,0.6), transparent 60%),
  radial-gradient(circle at 80% 72%, rgba(255,255,255,0.45), transparent 65%),
  linear-gradient(135deg,#f6f1e9 0%,#eee3d4 55%,#e4d6c4 100%); padding-bottom:80px; position:relative; }
.about-page::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 10px,rgba(0,0,0,.02) 10px 20px); opacity:.75; mix-blend-mode:soft-light; }

.mast { position:relative; padding:120px 20px 90px; text-align:center; overflow:hidden; }
.mast-bg { position:absolute; inset:0; background:
  radial-gradient(circle at 35% 30%, rgba(200,16,46,0.18), transparent 60%),
  radial-gradient(circle at 70% 65%, rgba(244,162,97,0.22), transparent 65%),
  linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0.35)); filter:blur(4px); }
.mast-inner { position:relative; max-width:1100px; margin:0 auto; }
.brand { margin:0 0 24px; font-size: clamp(3rem, 7vw, 5.2rem); font-weight:700; letter-spacing:.05em; background:linear-gradient(95deg,#b07116,#c8892e 35%,#debb62 70%,#f2dca0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tagline { margin:0 auto 36px; max-width:760px; font-size:1.05rem; line-height:1.65; color:#624d35; font-weight:500; }
.quick-facts { display:flex; flex-wrap:wrap; gap:24px; justify-content:center; }
.fact { background:rgba(255,255,255,0.75); backdrop-filter:blur(10px); border:1px solid rgba(180,140,90,0.35); border-radius:18px; padding:16px 26px 18px; min-width:150px; text-align:center; box-shadow:0 4px 16px -6px rgba(150,110,50,0.25); }
.fact .num { display:block; font-size:1.8rem; font-weight:700; letter-spacing:.05em; background:linear-gradient(120deg,#b07116,#e2c98a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fact .label { display:block; margin-top:4px; font-size:.75rem; letter-spacing:.2em; color:#7a5a2d; text-transform:uppercase; }

.section-block { padding:70px clamp(20px,4vw,80px) 30px; position:relative; }
.section-title { margin:0 0 40px; font-size:2rem; font-weight:600; letter-spacing:.06em; text-align:center; background:linear-gradient(120deg,#c8102e,#e76f51,#f4a261); -webkit-background-clip:text; background-clip:text; color:transparent; }

.text-grid { display:grid; gap:40px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start; }
.text-grid .text { font-size:.95rem; line-height:1.75; color:#4d3c2c; }
.highlight { background:linear-gradient(145deg,#fff,#f8efe3); border:1px solid rgba(190,150,90,0.4); padding:26px 26px 30px; border-radius:22px; box-shadow:0 6px 22px -8px rgba(150,110,50,0.28); }
.highlight h3 { margin:0 0 18px; font-size:1.15rem; font-weight:600; letter-spacing:.5px; color:#6a4c1a; }
.highlight ul { margin:0; padding-left:20px; color:#5a462f; font-size:.9rem; line-height:1.6; }
.highlight li { margin:6px 0; }

.pill-cards { display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.pill { background:rgba(255,255,255,0.75); backdrop-filter:blur(10px); border:1px solid rgba(190,150,90,0.35); padding:20px 20px 22px; border-radius:26px; position:relative; box-shadow:0 4px 16px -6px rgba(150,110,50,0.25); transition:.3s; }
.pill:hover { transform:translateY(-4px); }
.pill h4 { margin:0 0 10px; font-size:1rem; font-weight:600; letter-spacing:.5px; color:#6a4b1a; }
.pill p { margin:0; font-size:.8rem; line-height:1.55; color:#5a462f; }

.arch-grid { display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.arch-box { background:linear-gradient(150deg,#ffffff 0%,#faf5ed 60%,#f1e6d5 100%); border:1px solid rgba(190,150,90,0.35); border-radius:18px; padding:18px 18px 22px; font-size:.82rem; line-height:1.55; color:#5a462f; box-shadow:0 4px 16px -6px rgba(150,110,50,0.25); }
.arch-box h4 { margin:0 0 8px; font-size:.95rem; font-weight:600; color:#6a4c1a; }

.timeline { position:relative; margin:0 auto; max-width:880px; }
.tl-item { position:relative; padding-left:40px; margin-bottom:34px; }
.tl-item .dot { position:absolute; left:10px; top:4px; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,#c8102e,#e76f51); box-shadow:0 0 0 4px rgba(200,16,46,0.15); }
.tl-item.future .dot { background:linear-gradient(135deg,#b9b9b9,#d2d2d2); box-shadow:0 0 0 4px rgba(120,120,120,0.15); }
.tl-item .content h4 { margin:0 0 6px; font-size:1rem; font-weight:600; letter-spacing:.5px; color:#5a3d1a; }
.tl-item .content p { margin:0; font-size:.8rem; line-height:1.55; color:#5a4836; }
.timeline::before { content:""; position:absolute; left:18px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,rgba(200,16,46,0.35),rgba(244,162,97,0.35)); }

.credits-grid { display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.credit-box { background:rgba(255,255,255,0.75); border:1px solid rgba(190,150,90,0.35); padding:20px 20px 24px; border-radius:20px; line-height:1.55; font-size:.8rem; color:#5a462f; box-shadow:0 4px 16px -6px rgba(150,110,50,0.25); }
.credit-box h4 { margin:0 0 10px; font-size:.95rem; font-weight:600; color:#6a4c1a; }

.contact-panel { max-width:880px; margin:0 auto; background:linear-gradient(145deg,#ffffff 0%,#faf4ea 65%,#f2e6d3 100%); border:1px solid rgba(190,150,90,0.35); padding:32px 34px 38px; border-radius:26px; box-shadow:0 6px 24px -10px rgba(150,110,50,0.25); font-size:.9rem; line-height:1.75; color:#4d3c2c; }
.contact-list { margin:20px 0 0; padding-left:18px; }
.contact-list li { margin:4px 0; font-size:.8rem; color:#5a462f; }
.mono { font-family:Menlo,Consolas,monospace; font-size:.78rem; background:rgba(0,0,0,0.06); padding:2px 6px; border-radius:6px; }

.about-footer { text-align:center; margin:80px 0 0; font-size:.7rem; letter-spacing:.2em; color:#6b563d; opacity:.85; }

@media (max-width: 900px){
  .mast { padding:100px 16px 70px; }
  .brand { font-size: clamp(2.6rem, 9vw, 4rem); }
  .section-block { padding:60px 20px 20px; }
  .timeline::before { left:14px; }
  .tl-item { padding-left:34px; }
  .tl-item .dot { left:4px; }
  .contact-panel { padding:26px 24px 32px; }
}
@media (prefers-color-scheme: dark){
  .about-page { background:linear-gradient(135deg,#2f2924 0%,#392f27 55%,#43372c 100%); }
  .about-page::after { background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 10px,rgba(0,0,0,.25) 10px 20px); opacity:.5; }
  .tagline { color:#d9c9b4; }
  .fact { background:rgba(60,52,45,0.75); border-color:#5e4f40; }
  .fact .label { color:#d7c2a8; }
  .text-grid .text { color:#d7c2a8; }
  .highlight { background:linear-gradient(145deg,#3d352c,#463c32); border-color:#5e4f40; color:#e9ddcf; }
  .highlight h3 { color:#e2c892; }
  .highlight ul { color:#d9c7b3; }
  .pill { background:rgba(60,52,45,0.75); border-color:#5e4f40; }
  .pill p { color:#d9c7b3; }
  .arch-box { background:linear-gradient(150deg,#3d352c,#463c32 60%,#524436 100%); border-color:#5e4f40; color:#d9c7b3; }
  .arch-box h4 { color:#e2c892; }
  .tl-item .content p { color:#d9c7b3; }
  .timeline::before { background:linear-gradient(180deg,rgba(200,16,46,0.45),rgba(244,162,97,0.45)); }
  .credit-box { background:rgba(60,52,45,0.75); border-color:#5e4f40; color:#d9c7b3; }
  .credit-box h4 { color:#e2c892; }
  .contact-panel { background:linear-gradient(145deg,#3d352c,#463c32 65%,#524436 100%); border-color:#5e4f40; color:#e9ddcf; }
  .contact-list li { color:#d9c7b3; }
  .mono { background:rgba(255,255,255,0.08); }
  .about-footer { color:#d7c2a8; }
}
</style>